<template>
	<div>
		<t-sticky :style="{ backgroundColor: '#fff' }">
			<t-navbar :title="title" :fixed="false" left-arrow @left-click="handleBack" />
		</t-sticky>
		<t-pull-down-refresh v-model="refresherTriggered" :loading-bar-height="100" :max-bar-height="120"
			:loading-texts="['下拉刷新', '松开刷新', '正在刷新', '刷新完成']" @refresh="onRefresh" @onScrolltolower="handleScroll">
			<div ref="scrollContainer" class="boxs">
				<div class="index-box">
					<SpecialList :classifyId="tabId" ref="tabRef"  />
				</div>
			</div>
		</t-pull-down-refresh>
	</div>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted,
		onUnmounted,
		watch,
		nextTick
	} from "vue";
	import {
		useRouter,
		useRoute
	} from 'vue-router';

	import SpecialList from "@/components/SpecialList/SpecialList";
	const router = useRouter();
	const route = useRoute();

	const scrollTop = ref(0);
	const refresherTriggered = ref(false);
	const scrollRef = ref(null);
	const topicRef = ref(null);
	const swiperRef = ref(null);
	const tabIndex = ref(0);
	const scrollContainer = ref(null);
	const tabRef = ref(null);
	const tabRef1 = ref(null);
	const tabRef2 = ref(null);
	const newTabRef = ref(null);
	const isShow = ref(false);
	const currentValue = ref('90');
	const bannerList = ref([]);
	const classify = ref(2);
	const isReachBottom = ref(false);
	const aspectRatiodate = ref('1 / 0.568'); //swiper宽高比
	const title = ref('');
	const tabId = ref('');
	// 绑定容器 ref（用于获取宽度）
	const swiperContainer = ref(null);
	// 存储动态高度（初始值为 0，挂载后更新）
	const swiperHeight = ref(230);

	//定义是否滚动到底部的状态（传递给子组件）
	// const isReachBottom = ref(false);

	// 跳转搜索
	const goToSearch = () => {
		uni.navigateTo({
			url: "/pages/search/index"
		})
	}

	// 跳转榜单
	const goToRank = () => {
		uni.navigateTo({
			url: "/pages/chart/index"
		})
	}

	// 跳转分类
	const goToClassify = () => {
		router.push({
			name: 'classifys',
		});
	}
	// 滚动加载分类列表
	// const handleScroll = () => {
	// 	tabRef.value?.scrolltolower();
	// }

	// 下拉刷新
	const onRefresh = async () => {
		refresherTriggered.value = true;
		await tabRef.value?.reload();
		refresherTriggered.value = false;
	}

  //返回上一页
  const handleBack = () => {
  	router.back();
  };

	const getMy = () => {
		router.push({
			name: 'my',
		});
	}

	onMounted(() => {
		// uni.preloadPage({
		// 	url: "/pages/chart/index"
		// })
		const token = localStorage.getItem('token');
		title.value = localStorage.getItem('title');
		tabId.value = localStorage.getItem('tabId');

	})

	// 6. 卸载时移除事件监听（避免内存泄漏）
	onUnmounted(() => {
	});
</script>



<style lang="scss" scoped>
	.scroll-view {
		height: calc(100vh - 200rpx - var(--status-bar-height));
	}

	.comic-top-box {
		width: 100%;
		height: 90px;
		background-image: url("@/assets/topbg.png");
		background-size: 100% 100%;
		padding-top: var(--status-bar-height);
		display: flex;
		flex-direction: column;
		// position: fixed;
		// top:0;
		// z-index: 1;


		.searchbox {
			position: relative;
			padding-top: 15px;

			.search {
				display: flex;
				width: calc(100% - 30px);
				margin: 0 15px;
			}

			padding: 0rpx 30rpx;
		}

		.tabs-box {
			padding: 0rpx 0rpx;
			padding-bottom: 20rpx;
		}
	}

	.index-box {
		padding: 20px 12.5px;
		padding-top: 0px;

		.typebox {
			display: flex;
			padding-top: 20px;
			justify-content: space-between;

			.type {
				height: 124rpx;
				display: flex;
				width: 25%;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.text {
					color: #6c6c6c;
					font-size: 28rpx;
					font-weight: 500;
					color: #6C6C6C;
				}
			}
		}
	}

	.tab-list {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 44px;
		margin-top: 15px;
		padding-bottom: 10px;

		.tab {
			padding: 0 11px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;

			p {
				color: rgb(108, 108, 108);
				font-size: 18px;
			}

			.line {
				height: 10px;
				width: 25px;
				transition-duration: 300ms;
				position: absolute;
				bottom: 0px;
			}
		}

		.tab-active {
			p {
				font-size: 25px !important;
				color: rgb(48, 49, 51) !important;
				font-weight: 700;
			}

			.line {
				background: url('@/assets/index/tabs-bg.png') 100% 100% / cover;
			}
		}
	}

	.banner-box {
		display: inline-block;
		width: 100%;
		height: 230px;
		overflow: hidden;
	}

	.boxs {
		margin-bottom: 20px;
	}
</style>